import React, { Component } from 'react';
import { Table, Button, Space, Card } from 'antd';
import api from '../../../api/api';
import { Link } from 'react-router-dom';

export default class ProductsList extends Component {
  state = {
    goods: [],
  };

  async findGoods() {
    let { data: res } = await api.goodsAPIs.findGoods();
    // console.log(res);
    this.setState({
      goods: res.data,
    });
  }

  componentDidMount() {
    this.findGoods();
  }
  handleProductOnShelves = (record, e) => {
    if (e.target.innerText === '点击下架') {
      this.setState({
        goods: this.state.goods.map(item => {
          if (item._id === record._id) {
            item.state = 0;
          }
          return item;
        }),
      });
    } else {
      this.setState({
        goods: this.state.goods.map(item => {
          if (item._id === record._id) {
            item.state = 1;
          }
          return item;
        }),
      });
    }
  };

  render() {
    const { goods } = this.state;
    const columns = [
      {
        title: '商品名字',
        dataIndex: 'name',
      },
      {
        title: '商品描述',
        dataIndex: 'title',
      },
      {
        title: '商品价格',
        dataIndex: 'price',
        key: '_id',
      },
      {
        title: '商品类型',
        dataIndex: 'type',
        key: '_id',
        render: (text, record) => record.name,
      },

      {
        title: '商品状态',
        key: '_id',
        render: (text, record) => {
          return record.state ? (
            <Button
              onClick={e => {
                this.handleProductOnShelves(record, e);
              }}
            >
              点击下架
            </Button>
          ) : (
            <Button
              type="primary"
              onClick={e => {
                this.handleProductOnShelves(record, e);
              }}
            >
              点击上架
            </Button>
          );
        },
      },

      {
        title: '操作',
        key: '_id',
        render: (text, record) => (
          <Space size="middle">
            <Link
              style={{ minWidth: 32, display: 'inline-block' }}
              to={'/products/update/' + record._id}
            >
              修改
            </Link>
            <Button
              type="link"
              onClick={async () => {
                await api.goodsAPIs.deleteGoods(record._id);
                this.findGoods();
              }}
            >
              删除
            </Button>
            <Button type="link">详情</Button>
          </Space>
        ),
      },
    ];

    return (
      <div>
        <Card
          title="商品列表"
          extra={
            <Button
              type="link"
              onClick={() => {
                this.props.history.push('/products/add');
              }}
            >
              添加商品
            </Button>
          }
        >
          <Table
            bordered={true}
            loading={goods.length ? false : true}
            rowKey="_id"
            columns={columns}
            dataSource={goods}
            pagination={{ pageSize: 3 }}
          />
        </Card>
      </div>
    );
  }
}
